<template>

  <div >
  <div class="mint-swipe">
    <img class="img" src="../../assets/images/background.webp" alt="">
    </div>
    <div class="goods-list">
    <div class="goods-item" v-for="item in goodslist" :key="item.id">
      <router-link :to="{name: 'goods_info', params: {id: item.id}}">
        <img v-lazy="item.image" alt="" />
        <h1 class="title">{{ item.name }}</h1>
        <p class="info">
          <span class="price">积分：{{ item.price }}</span>
        </p>
      </router-link>
    </div>
  </div>
</div>
</template>

<script>

export default {
  data () {
    return {
      goodslist: []
    }
  },
  created () {
    this.getGoodsList()
  },
  directives: {
    lazy: {
      inserted(el, binding) {
        function loadImage() {
          el.src = binding.value;
        }
        function onIntersection(entries, observer) {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              loadImage();
              observer.unobserve(el);
            }
          });
        }
        el.src = require('../../assets/images/background.webp'); // 占位图
        const observer = new IntersectionObserver(onIntersection, {
          rootMargin: '0px',
          threshold: 0.1
        });
        observer.observe(el);
      }
    }
  },
  methods: {
    getGoodsList () {
      this.$indicator.open({
        text: '加载中'
      })
      this.$http.get('goods/goodslist').then(res=>{
        this.goodslist = this.goodslist.concat(res.data.data)
        this.$indicator.close()
      })
    },
    getMore () {
      this.getGoodsList()
    }
  }
}
</script>

<style lang="scss" scoped>
.goods-list {
  display: flex;
  flex-wrap: wrap;
  padding-left: 10px;
  .goods-item {
    width: calc(calc(100% / 2) - 10px);
    margin: 10px 10px 0 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 10px;
    padding: 10px;
    img {
      width: 100%;
    }
    .title {
      font-size: 14px;
      color: #333;
      margin: 10px 0;
    }
    .info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0;
      .price {
        color: red;
        font-weight: bold;
        font-size: 16px;
      }
      .sell {
        font-size: 13px;
      }
    }
  }
  .more {
    margin: 15px 0;
    font-size: 14px;
  }
}
.mint-swipe {
  height: 200px;
  color: #fff;
  .mint-swipe-items-wrap {
    .mint-swipe-item {
      text-align: center;
    }
    
  }
}
.img {
      width: 100%;
      height: 100%;
    }
</style>
